---
sidebar_position: 4
---

# Troubleshooting

Some tips on how to solve common issues with ReactTooltip.

import { Tooltip } from 'react-tooltip'

export const TooltipAnchor = ({ children, id, ...rest }) => {
  return (
    <span
      id={id}
      style={{
        display: 'flex',
        justifyContent: 'center',
        margin: 'auto',
        alignItems: 'center',
        width: '60px',
        height: '60px',
        borderRadius: '60px',
        color: '#222',
        background: 'rgba(255, 255, 255, 1)',
        cursor: 'pointer',
        boxShadow: '3px 4px 3px rgba(0, 0, 0, 0.5)',
        border: '1px solid #333',
      }}
      {...rest}
    >
      {children}
    </span>
  )
}

:::info

Before trying these, make sure you're running the latest ReactTooltip version with

```sh
npm install react-tooltip@latest
```

or

```sh
yarn add react-tooltip@latest
```

:::

If you can't find your problem here, make sure there isn't [an open issue on GitHub](https://github.com/ReactTooltip/react-tooltip/issues) already covering it.
If there isn't, feel free to [submit a new issue here](https://github.com/ReactTooltip/react-tooltip/issues/new/choose).

## The tooltip is broken/not showing up

Make sure you've imported the default styling. You only need to do this once on your application and only if you are using a version before `5.13.0`, `App.jsx`/`App.tsx` is usually a good place to do it.

```jsx
import 'react-tooltip/dist/react-tooltip.css'
```

If you've imported the default styling and the tooltip is still not showing up when you hover on your anchor element, make sure you have content to be displayed by the tooltip.

If `data-tooltip-content` and `data-tooltip-html` are both unset (or they have empty values) on the anchor element, and also the `content`, `render`, and `children` props on the tooltip are unset (or have empty values), the tooltip is not shown by default.

## The tooltip doesn't close

This usually happens when you try to set the tooltip opacity via CSS. Due to the opacity being used internally to control the tooltip state, overriding it breaks functionality.

Instead, use the `opacity` prop, or override the `--rt-opacity` CSS variable. See [the examples](./examples/styling#changing-the-opacity) for more details.

```jsx
<Tooltip opacity={1} />
```

or

```css
:root {
  --rt-opacity: 1;
}
```

### The tooltip doesn't close when using `closeEvents={{ click: true }}`

Some HTML elements, such as the `<svg>`, can sometimes capture click events and not propagate them. If your anchor element contains an `<svg>` element, try setting `pointer-events: none;` on it.

```jsx
<button data-tooltip-id="...">
  <svg className="my-svg">
    ...
  </svg>
</button>
```

```css
.my-svg {
  pointer-events: none;
}
```

## The border doesn't show for the arrow

Simply setting the border for the tooltip through CSS will not work for the arrow.

Instead, use [the `border` prop](./examples/styling#changing-the-border).

```jsx
<Tooltip border="1px solid red" />
```

## Bad performance

If you're experiencing any kind of unexpected behavior or bad performance on your application when using ReactTooltip, here are a few things you can try.

### Move `<Tooltip />` on the DOM

This is specially relevant when using components that are conditionally rendered.

Always try to keep the `<Tooltip />` component rendered, so if you're having issues with a tooltip you've placed inside a component which is placed/removed from the DOM dynamically, try to move the tooltip outside of it.

We usually recommend placing the tooltip component directly inside the root component of your application (usually on `App.jsx`/`App.tsx`).

### Dynamically generated anchor elements

You should avoid needlessly using a large amount of `<Tooltip />` components. One tooltip component that you use across your whole application should be good enough in most cases, but you should be fine to add a few more if you need to use different styled tooltips.

Here's a simple example on how to improve performance when using dynamically generated items.

:::info

Check the examples for the [`anchorSelect`](./examples/anchor-select) and [`render`](./examples/render) props for more complex use cases.

:::

```jsx
// ❌ BAD
<div className="items-container">
  {myItems.map(({ id, content, tooltip }) => (
    <div key={id} className="item" data-tooltip-id={`tooltip-${id}`}>
      {content}
      <Tooltip id={`tooltip-${id}`} content={tooltip} />
    </div>
  ))}
</div>
```

```jsx
// ✅ GOOD
<div className="items-container">
  {
    myItems.map(({ id, content, tooltip }) => (
      <div
        key={id}
        className="item"
        data-tooltip-id="my-tooltip"
        data-tooltip-content={tooltip}
      >
        {content}
      </div>
    ))
  }
</div>
<Tooltip id="my-tooltip" />
```

## The tooltip doesn't work when using a Shadow DOM

ReactTooltip currently does not support Shadow DOM usage, but it is on our roadmap.

See [issue #1029](https://github.com/ReactTooltip/react-tooltip/issues/1029) and [PR #1068](https://github.com/ReactTooltip/react-tooltip/pull/1068) for more info.


## `Can't import the named export 'xxx' from non EcmaScript module (only default export is available)`

:::info

If you're running into this message on a project not using `webpack` or `react-scripts`, please [submit a bug report](https://github.com/ReactTooltip/react-tooltip/issues/new/choose) with information about your setup.

:::

### If you're using `webpack`

This problem can be fixed by adding a rule to your `webpack.config.js` file.

```js
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      }
    ]
  }
}
```

### If you're using `react-scripts`

Try upgrading to the latest `react-scripts` version (v5.0.1 at the time of writing).

```sh
npm i react-scripts@latest
```

or

```sh
yarn add react-scripts@latest
```

## The tooltip component is `undefined` ([#1067](https://github.com/ReactTooltip/react-tooltip/issues/1067))

This might be related to an issue with `create-react-app` not supporting `.cjs` files, which is the default extension for the ReactTooltip dist file (`react-tooltip.min.cjs`).
See [`cra`'s issue #12700](https://github.com/facebook/create-react-app/issues/12700#issuecomment-1463040093) for the recommended way to fix this for all of your project dependencies.

If you wish to only fix this for `react-tooltip`, see below.

By default, your project will be importing the `react-tooltip.min.cjs` file. To workaround this, you must change the ReactTooltip `package.json` file (not the one on the root of your project!).
To do this, run the following inside your project directory:

```sh
# if you're on Windows, just download the `.patch` file manually
wget https://github.com/ReactTooltip/react-tooltip/files/12195501/react-tooltip-1067.patch
git diff react-tooltip-1067.patch
```

This will apply the necessary changes (which you can check out for yourself).
The only problem with this approach is that reinstalling `react-tooltip`, or cloning your project into a new environment, means you'll have to apply the changes again.
For that reason, consider the [recommended solution](https://github.com/facebook/create-react-app/issues/12700#issuecomment-1463040093) mentioned above, or using [`patch-package`](https://www.npmjs.com/package/patch-package).

## Next.js `TypeError: f is not a function`

This problem seems to be caused by a bug related to the SWC bundler used by Next.js.
The best way to solve this is to upgrade to `next@13.3.0` or later versions.

Less ideally, if you're unable to upgrade, you can set `swcMinify: false` on your `next.config.js` file.

## Next.js `"use client"` error

This normally happens when you use `react-tooltip` inside a component that is not tagged as client component. For more info, see the [Next.js docs](https://nextjs.org/docs/getting-started/react-essentials#client-components).

To use `react-tooltip` on Next.js 13 without having to tag your component or page as a client component, just create a new file `ReactTooltip.tsx` (for this example, the file path is `src/components/ReactTooltip.tsx`) and place the following code inside of the created file:

:::caution

Avoid naming the file `react-tooltip.tsx` (or with whichever extension your project uses), since it may interfere with your editor's autocomplete functionality, and your bundling/compiling process.

:::

```jsx
// src/components/ReactTooltip.tsx
'use client'

export { Tooltip } from 'react-tooltip'
```

When importing the tooltip:

```jsx
// ❌ OLD
import { Tooltip } from 'react-tooltip'
```

```jsx
// ✅ NEW
import { Tooltip } from 'components/ReactTooltip'
```
